<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="1100px">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane :label="$t('baseInfo')" name="base">
        <el-form
          ref="ruleForm"
          :model="baseForm"
          :rules="baseRules"
          :inline="true"
          label-width="110px"
        >
          <el-form-item :label="$t('eqpId')" prop="eqpName">
            <el-input
              :disabled="baseForm.id ? true : false"
              v-model.trim="baseForm.eqpName"
              onkeyup="this.value = this.value.replace(/[\u4e00-\u9fa5]/ig,'')"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('description')" prop="description">
            <el-input
              v-model.trim="baseForm.description"
              :disabled="detailDisable"
              type="textarea"
              style="width: 400px"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="设备参数" name="eqp">
        <el-form
          :model="baseForm"
          :rules="baseRules"
          :inline="true"
          :disabled="detailDisable"
          label-width="110px"
        >
          <el-form-item
            :label="$t('eqpheadids')"
            prop="headId"
          >
            <el-input
              v-model.trim="baseForm.headId"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpemGroup')" prop="emGroup">
            <el-select v-model="baseForm.emGroup" clearable filterable>
              <el-option
                v-for="item in emGroupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqpserialNo')" prop="serialNo">
            <el-input v-model.trim="baseForm.serialNo" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpassetNo')" prop="assetNo">
            <el-input v-model.trim="baseForm.assetNo" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpassetAllocate')" prop="assetAllocate">
            <el-select v-model.trim="baseForm.assetAllocate" clearable filterable>
              <el-option
                v-for="item in assetAllocateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('factory')" prop="factory">
            <el-input v-model.trim="baseForm.factory" style="width: 200px" />
          </el-form-item>
          <el-form-item
            :label="$t('eqpancillaryAssetNo')"
            prop="ancillaryAssetNo"
          >
            <el-input v-model.trim="baseForm.ancillaryAssetNo" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpbuyoffTime')" prop="buyoffTime">
            <el-date-picker
              v-model="baseForm.buyoffTime"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpinTime')" prop="inTime">
            <el-date-picker
              v-model="baseForm.inTime"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
            />
          </el-form-item>

          <el-form-item :label="$t('eqpbuyoffBy')" prop="buyoffBy">
            <el-input v-model="baseForm.buyoffBy" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpwarrantyDate')" prop="warrantyDate">
            <el-date-picker
              v-model="baseForm.warrantyDate"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpspecialFeature')" prop="specialFeature">
            <el-input v-model.trim="baseForm.specialFeature" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpsystemType')" prop="systemType">
            <el-select v-model="baseForm.systemType" clearable filterable>
              <el-option
                v-for="item in systemTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('firstOwenrId')" prop="firstOwenrId">
            <el-select v-model="baseForm.owenrId" clearable filterable>
              <el-option
                v-for="item in owenrIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('secondOwenrId')" prop="secondOwenrId">
            <el-select v-model="baseForm.secondOwenrId" clearable filterable>
              <el-option
                v-for="item in owenrIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('selectUserGroup')" prop="userGroupIds">
            <el-select
              v-model="baseForm.userGroupIds"
              clearable
              filterable
              multiple
            >
              <el-option
                v-for="item in userGroupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('station')" prop="station">
            <el-select
              v-model="baseForm.station"
              clearable
              filterable
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('useLocation ')" prop="useLocation">
            <el-input
              v-model.trim="baseForm.useLocation"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item
            :label="$t('eqpfullSiteQty')"
            prop="fullSiteQty"
          >
            <el-select v-model="baseForm.fullSiteQty" clearable filterable>
              <el-option
                v-for="item in fullSiteQtylist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqpactiveControl')" prop="activeControl">
            <el-select v-model="baseForm.activeControl" clearable>
              <el-option :value="0" label="NO" />
              <el-option :value="1" label="YES" />
              <el-option :value="99" label="未设置" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqptesterConfig')" prop="testerConfig">
            <el-input v-model.trim="baseForm.testerConfig" />
          </el-form-item>
          <el-form-item :label="$t('eqplocation')" prop="location">
            <el-select v-model="baseForm.location" clearable filterable>
              <el-option
                v-for="item in locationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqpState')" prop="state">
            <el-select v-model="baseForm.state" clearable filterable>
              <el-option
                v-for="item in eqpStateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer">
      <el-button
        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { doAdd, doUpdate, getInfo } from '@/api/equipment/eqpInfoManage'
import { eqptypelist, eqpmodellist, getAllEqpUserGroup } from '@/api/equipment/eqpbase'
import selectJob from '@/api/system/attributes'
import { getRemarkList } from '@/api/production/workRecord'
import { getAllUserGroups } from '@/api/system/usergroup'
import { getAllUsers } from '@/api/system/user'

export default {
  name: 'EqpManageModel',
  props: {
    layoutId: {
      type: String,
      default: ''
    }
  },
  data() {
    const baseFormTags = [
      { label: this.$t('eqpId'), prop: 'eqpName', tag: 'DynInput', width: '320px' },
      // { label: this.$t('selectUserGroup'), prop: 'userGroupIds', tag: 'DynSelect', multiple: true },
      { label: this.$t('description'), prop: 'description', tag: 'DynTextarea', row: 2 }
    ]
    const ledgerFormTags = [
      { label: this.$t('eqpType'), prop: 'eqpType', tag: 'DynSelect', event: (value) => {
        eqpmodellist({ eqptype: value }).then(res => {
          this.$set(this.baseForm, 'eqpModel', '')
          this.$set(this.selectList, 'eqpModel', res.data)
        })
      } },
      { label: this.$t('eqpModel'), prop: 'eqpModel', tag: 'DynSelect' },
      { label: this.$t('eqpheadids'), prop: 'headId', tag: 'DynInput' },
      { label: this.$t('eqpserialNo'), prop: 'serialNo', tag: 'DynInput' },
      { label: this.$t('eqpassetNo'), prop: 'assetNo', tag: 'DynInput' }
    ]
    return {
      title: '',
      dialogVisible: false,
      detailDisable: false,
      activeName: 'base',
      baseForm: {},
      locationList: [],
      eqpStateList: [],
      fullSiteQtylist: [],
      stationList: [],
      userGroupList: [],
      owenrIdList: [],
      systemTypeList: [],
      assetAllocateList: [],
      emGroupList: [],
      baseFormTags: baseFormTags,
      ledgerFormTags: Object.freeze(ledgerFormTags),
      baseRules: {
        eqpName: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('eqpId')}`, trigger: 'blur' }]
        // serialNo: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('eqpserialNo')}`, trigger: 'blur' }],
        // assetNo: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('eqpassetNo')}`, trigger: 'blur' }]
      },
      selectList: {}
    }
  },
  methods: {
    async handleOpen(row, detail = false) {
      if (row && row.id) {
        if (detail) {
          this.title = this.$t('details')
          this.detailDisable = detail
        } else {
          this.title = this.$t('modify')
        }
        const res = await getInfo({ id: row.id })
        this.baseForm = res.data
        if (res.data.eqpType) {
          const modelListData = await eqpmodellist({ eqptype: res.data.eqpType })
          this.$set(this.selectList, 'eqpModel', modelListData.data)
        }
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      // this.getEqpTypeList()
      // this.getEqpUserGroupList()
      selectJob.selectitemlist({ name: 'EQP_LocationList' }).then((res) => {
        this.locationList = res.data
      })
      selectJob.selectitemlist({ name: 'EQP_StateList' }).then((res) => {
        this.eqpStateList = res.data
      })
      selectJob.selectitemlist({ name: 'EQP_fullSiteQtylist' }).then((res) => {
        this.fullSiteQtylist = res.data
      })
      selectJob.selectitemlist({ name: 'EQP_SystemtypeList' }).then((res) => {
        this.systemTypeList = res.data
      })
      selectJob.selectitemlist({ name: 'EQP_AssetalList' }).then((res) => {
        this.assetAllocateList = res.data
      })
      selectJob.selectitemlist({ name: 'EQP_EMGroupList' }).then((res) => {
        this.emGroupList = res.data
      })
      this.getStations()
      this.getAllUserGroupsList()
      getAllUsers().then((res) => {
        this.owenrIdList = res.data
      })
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    doSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.baseForm.id) {
            doUpdate(this.$clearNull({ ...this.baseForm, layoutId: this.layoutId })).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          } else {
            doAdd(this.$clearNull({ ...this.baseForm, layoutId: this.layoutId })).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          }
        }
      })
    },
    async getEqpUserGroupList() {
      const res = await getAllEqpUserGroup()
      this.$set(this.selectList, 'userGroupIds', res.data)
    },
    async getEqpTypeList() {
      const res = await eqptypelist()
      this.$set(this.selectList, 'eqpType', res.data)
    },
    async getStations() {
      const res = await getRemarkList({ name: 'STATION' })
      this.stationList = res.data
    },
    async getAllUserGroupsList() {
      const res = await getAllUserGroups()
      this.userGroupList = res.data
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-date-editor {
    width: 195px;
}
</style>
